<template>
    <!--  我是大屏-->
    <div id="themain">
      <div>
    <dv-full-screen-container>  

      <dv-border-box-11 title="智慧管理社区" style="height: 105vh;">
        <div style="padding: 55px 10px 20px 10px;">

        <div style="display: flex;">

          <div style="flex:0 1 25%;height: 300px;width: 100%;">
            <!-- 左边上侧 -->
            <dv-border-box-8>
              <div>
                <dv-active-ring-chart :config="config" style="width:200px;height:200px;margin-left: 30px;" />
                <dv-capsule-chart :config="config" style="width:300px;height:150px;margin-top: -40px;" />
              </div>
            </dv-border-box-8>
          </div>
          <!-- 中间的中间 -->
          <div style="flex:0 1 50%;height: 300px;width: 100%;">
            <dv-border-box-8>
               <div>
                <!-- 视频的播放 -->
              <router-view/>
            </div>

            </dv-border-box-8>
          </div>
          <div style="flex:0 1 25%;height: 300px;width: 100%;">
            <dv-border-box-8>
              <dv-conical-column-chart :config="config2" style="width:300px;height:200px;" />
            </dv-border-box-8>
          </div>
        
        </div>



        <div style="display: flex;">
        
          <div style="flex:0 1 25%;height: 250px;width: 100%;" >
            <dv-border-box-8>空城</dv-border-box-8>

          </div>
          <div style="flex:0 1 50%;" >
                   
            <!-- 登记表 -->
            <dv-border-box-8 style="height:125px ;">
            <div style="display: flex;  justify-content:space-around">
              <template v-for="(item,index) in imglist">
          <div style="display: flex;margin-top: 30px;">
           
            <img :src=item.img alt="" style="height: 55px;width:55px;" />
            <div style="margin: 10px;color: aliceblue;font-size: 13px;">
              {{item.text}}
             <div style="margin:3px 10px 10px 10px">{{item.count}}</div>
            </div>
            
          
          </div>
        </template>
         

            </div>
            


            </dv-border-box-8>
            <div style="display: flex;">
              <!-- 下面那个长的 -->
              <div style="flex:0 1 50%;height: 125px;width: 100%;" >
                <dv-border-box-12>


ifv

                </dv-border-box-12>
</div>
<div style="flex:0 1 50%;height: 125px;width: 100%;" >
  <dv-border-box-12>dv-border-box-12</dv-border-box-12>
</div>
            </div>
           
          </div>
          <!-- 最右侧的最下面 -->
          <div style="flex:0 1 25%;height: 250px;width: 100%;" >
            <dv-border-box-8>

              <dv-scroll-board :config="config5" style="width:100%;height:100%" />

            </dv-border-box-8>

          </div>
        
        </div>

      </div>

      </dv-border-box-11>

      <!--第一行的数据 -->
  

    </dv-full-screen-container>
  </div>
</div>
  </template>
  
  <script>
    // 1 导入需要使用的组件

     export default{
  

      data(){
        return{
          config:{data:
            [ {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    }],
    lineWidth: 12,
    //设置圆形里面的字体的大小
    digitalFlopStyle: {
  fontSize: 16,
  fill: '#fff'
}
  } ,
  config2:{
    data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 71
    },
    {
      name: '驻马店',
      value: 66
    },
   
  ],
  img: [
    'E:/allprogram/wed/smartcommunity/src/assets/123.png',
    'src/assets/143.png',
    'src/assets/787.png',
    'src/assets/886.png',
    
  ],




  },

 
config5:{
  header: ['列1', '列2', '列3'],
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ],
  columnWidth:5,
  headerHeight:30,
},

imglist:[{
text:"房屋总数(人)",
count:899,
img: require('../assets/06.png'),
},
{
text:"住户总数(人)",
count:732,
img: require('../assets/02.png'), 
},
{
text:"管理员(人)",
count:123,
img: require('../assets/08.png'), 
},
]
  
  
 
        
}
      },
      methods:{
  
      }
     }
  </script>
  <style scoped>
 
    
#themain{
    background: url("../assets/bg.jpg"); 
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}
.ccmc-middle {
 
  
  .active-ring-name {
   
    
  }
}
  </style>